<template>
  <div>
    <!-- 数据导出下载中心 -->
    <div class="download app-main-content-box">
      <app-main-title title="数据导出下载中心" />
      <!-- 变动说明 -->
      <div class="app-main-tips-box top-tips">
        <div class="title">
          <i class="el-icon-warning" /> 数据导出说明
        </div>
        <ul>
          <li>1.导出的数据最多保留7天。</li>
          <li>2.不同的数据的大小会导致导出的时间不同，未导出成功的数据请耐心等待。</li>
        </ul>
      </div>
      <!--filter区域-->
      <div class="filter">
        <el-form ref="filterForm" :model="filterForm" label-width="100px" size="small">
          <!-- 筛选 -->
          <div class="app-main-filter-collapse-box filter">
            <el-collapse>
              <el-collapse-item ref="filterCollapse" title="按条件筛选" name="1">
                <el-form-item label="时间：" prop="date">
                  <el-radio-group v-model="filterForm.date">
                    <el-radio label="all">全部</el-radio>
                    <el-radio label="今天">今天</el-radio>
                    <el-radio label="最近3天">最近3天</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="导出源：" prop="taskType">
                  <el-radio-group v-model="filterForm.taskType">
                    <el-radio label="all">全部</el-radio>
                    <el-radio
                      v-for="(item, index) in taskTypeOptions"
                      :key="index"
                      :label="index"
                    >{{ item }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="导出状态：" prop="state">
                  <el-radio-group v-model="filterForm.state">
                    <el-radio label="all">全部</el-radio>
                    <el-radio
                      v-for="(item, index) in stateOption"
                      :key="index"
                      :label="index"
                    >{{ item }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </div>

          <el-form-item class="filter-btn">
            <el-button type="primary" round @click="submitForm('filterForm')">查 询</el-button>
            <el-button round @click="resetForm('filterForm')">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!--内容展示区域-->
      <div class="content">
        <!-- 表格内容 -->
        <div class="list-table">
          <el-table
            v-loading="tableLoading"
            :data="list"
            border
            stripe
            style="width: 100%"
            empty-text="暂无数据"
          >
            <el-table-column prop="createTime" label="时间" fixed="left" />
            <el-table-column prop="operatorName" label="申请人" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.operatorName }}<i v-if="scope.row.operatorPhone">（{{ scope.row.operatorPhone }}）</i></span>
              </template>
            </el-table-column>
            <el-table-column prop="taskType" label="导出源">
              <template slot-scope="scope">
                <span>{{ taskTypeOptions[scope.row.taskType] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="文件" />
            <el-table-column prop="state" label="导出状态">
              <template slot-scope="scope">
                <span>{{ stateOption[scope.row.state] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" fixed="right">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.state === 2"
                  type="text"
                  size="small"
                  @click="download(scope.row)"
                >下载</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total !== 0"
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExportTaskList } from '@/api/download'
export default {
  data() {
    return {
      list: [], // 表格数据
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      tableLoading: false, // 表格loading
      taskTypeOptions: {
        0: '门店推广二维码',
        2: '推广提成',
        3: '余额变动',
        4: '终端设备',
        5: '推广员二维码',
        6: '交易记录',
        7: '预订订单明细',
        8: '制码中心二维码',
        9: '校园请假',
        10: '寄存',
        11: '收款二维码',
        12: '交易汇总',
        13: '缴费汇总',
        14: '退款记录',
        16: '商城订单',
        17: '电子账户',
        20: '商户收入记录',
        21: '商户其他记录',
        22: '商户退款记录',
        25: '线索内容',
        26: '预约订单',
        27: '预约资源',
        28: '券核销报表',
        30: '卡核销报表',
        31: '订单核销报表',
        38: '惠点单',
        33: '超级会员订单'
      },
      stateOption: ['待导出', '导出中', '已完成', '导出失败'],
      filterForm: {
        date: 'all', // 日期类型
        state: 'all', // 导出源
        taskType: 'all' // 状态
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取列表
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)

      // 判断是否打开筛选
      if (!this.$refs.filterCollapse.isActive) {
        delete params.state
        delete params.taskType
        params.date = 'all'
      }

      // 获取时间
      const endTime = this.$momentMini().format('YYYY-MM-DD')
      switch (params.date) {
        case 'all':
          params.beginTime = this.$momentMini(
            Date.parse(new Date()) - 86400000 * 6
          ).format('YYYY-MM-DD')
          params.endTime = endTime
          break
        case '今天':
          params.beginTime = endTime
          params.endTime = endTime
          delete params.date
          break
        case '最近3天':
          params.beginTime = this.$momentMini(
            Date.parse(new Date()) - 86400000 * 2
          ).format('YYYY-MM-DD')
          params.endTime = endTime
          delete params.date
          break
      }

      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }

      // 请求数据
      this.tableLoading = true
      getExportTaskList(params)
        .then((res) => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
          this.tableLoading = false
        })
        .catch((err) => {
          this.tableLoading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       * 按钮组
       */
    // 下载对应文件
    download(row) {
      const queryArr = process.env.VUE_APP_BASE_API.split('')
      console.log(queryArr[queryArr.length - 1] == '/')
      var alink = document.createElement('a')
      alink.href = `${process.env.VUE_APP_BASE_API}${queryArr[queryArr.length - 1] == '/' ? '' : '/'}statistics_admin/task/download?taskId=${row.id}&X-BUSINESS-TOKEN=${this.$store.state.user.token}`
      alink.download = ''
      alink.click()
    },

    // 查询
    submitForm() {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.submitForm()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 头部说明 */
  .top-tips {
    margin-bottom: 20px;
  }
  .filter-btn {
    margin-bottom: 20px;
  }

  // 单选换行
  .el-radio + .el-radio {
    margin-left: 0;
  }
  .el-radio {
    margin-right: 10px;
    line-height: 32px;
  }
  i {
    font-style:normal;
  }
</style>
